<template>
	<view class='my-add-path'>

		<view class='path-item'>
			<view>收 件 人</view>
			<input type="text" value="" placeholder="收件人姓名" v-model="pathObj.name" />
		</view>

		<view class='path-item'>
			<view>手 机 号</view>
			<input type="text" value="" placeholder="11位手机号" v-model="pathObj.tel" />
		</view>

		<view class='path-item'>
			<view class="dropdown">
				<view><Region :width='500' @region="resgclick" :value="regionIndex"/></view>
				<!-- <image src="../../static/img/qq.png'"></image> -->
		    </view>

		</view>

		<view class='path-item'>
			<view>详细地址</view>
			<input type="text" value="" placeholder="5到60个字符" v-model="pathObj.address" />
		</view>

		<view class='path-item'>
			<view class="path-item-text">设为默认地址</view>
			<radio-group name="" @change="radioChange">
				<label class="radio">
					<radio color="#FF3333" 
					:checked=" pathObj.isDefault ==1 ? true : false " /><text></text>
				</label>
			</radio-group>
		</view>

	</view>
</template>

<script>
	import Region from '@/components/k-region/k-region.vue'
	import {mapActions} from 'vuex'
	export default {
		components: {
			Region
		},
		data() {
			return {
				regionIndex: [0, 0, 1],
				pathObj: {
					name: "zcy", //收货人
					tel: "1568238300", //收货人电话
					province: "湖南省", //省
					city: "长沙市", //市
					district: "天心区", //区
					address: "青园路168号", //收货人详细地址
					isDefault: false //默认地址
				},

				i:-1,
				index: 0,
				//是否修改的状态
				isStatus:false
			}
		},
		
		onLoad(e) {
			// console.log(e.data);
			if(e.data){
				uni.setNavigationBarTitle({
					title:"修改地址"
				})
				let result = JSON.parse(e.data);
				this.pathObj = result.item;
				this.i = result.index;
				this.isStatus = true;
			}
		},
		
		onNavigationBarButtonTap(){
			
			if(this.isStatus){
				// update
				this.updatePathFn({
					index:this.i,
					item:this.pathObj
				})
				uni.navigateBack({
					delta:1
				})
				
			}else{
				// add
				this.createPathFn(this.pathObj)
				uni.navigateBack({
					delta:1
				})
			}
		},
		
		methods: {
				...mapActions(["createPathFn",'updatePathFn']),
				
				// 默认地址
				radioChange(){
					this.pathObj.isDefault =  this.pathObj.isDefault==1?true:false;
					this.pathObj.isDefault = !this.pathObj.isDefault;
				},
			    
				// 更改省市区
				resgclick(ele){
					// console.log(ele,'选择的城市');
					this.pathObj.province = ele[0];
					this.pathObj.city = ele[1];
					this.pathObj.district = ele[2];
				},
			
		}
	}
</script>

<style scoped>
	.my-add-path {
		padding-left: 20rpx;
	}

	.path-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;
		width: 100%;
		border-bottom: 2rpx solid #CCCCCC;
	}

	.path-item input {
		flex: 1;
		text-align: left;
		padding-left: 10rpx;
	}
	.radio{
		display: inline-block;
		transform: translateX(290%);
	}
	.path-item-text{
		width: 550px;
		/* margin-right: 280px; */
	}
</style>